<template>
	<!-- 城市选择-->
	<view class="city-select">
		<scroll-view
			scroll-y="true"
			class="city-select-main"
			id="city-select-main"
			:scroll-top="scrollTop"
			:scroll-into-view="toView"
			@scroll="scroll"
		>
			<!-- 预留搜索-->
			<view class="city-serach" v-if="isSearch">
				<input
					class="city-serach-input"
					:value="serachCity"
					:placeholder="placeholder"
					@input="keyInput"
				/>
			</view>
			<!-- 当前定位城市 -->
			<view class="hot-city" v-if="activeCity && !serachCity">
				<u-icon name="map" color="#999" size="30"></u-icon>
				<text style="padding: 0 6rpx; flex: 1">当前：{{ active[formatName] }}</text>
			</view>
			<!-- 城市列表(搜索前) -->
			<view class="citys" v-if="!serachCity">
				<view
					v-for="(city, index) in sortItems"
					v-show="city.isCity"
					class="citys-row"
					:key="index"
				>
					<view
						class="citys-item-letter"
						:id="'city-letter-' + (city.name === '#' ? '0' : city.name)"
					>
						{{ city.name }}
					</view>
					<view
						class="citys-item"
						v-for="(item, inx) in city.citys"
						:key="inx"
						@click="cityTrigger(item)"
					>
						{{ item.cityName }}
					</view>
				</view>
			</view>
			<!-- 城市列表(搜索后)  -->
			<view class="citys" v-if="serachCity">
				<view v-for="(item, index) in searchDatas" :key="index" class="citys-row">
					<view class="citys-item" :key="index" @click="cityTrigger(item)">
						{{ item.name }}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 城市选择索引-->
		<view class="city-indexs-view" v-if="!serachCity">
			<view class="city-indexs">
				<view
					v-for="(cityIns, index) in handleCity"
					class="city-indexs-text"
					v-show="cityIns.isCity"
					:key="index"
					@click="cityindex(cityIns.forName)"
				>
					{{ cityIns.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import citySelect from "./citySelect.js"
export default {
	props: {
		//查询提示文字
		placeholder: {
			type: String,
			default: "请输入城市名称"
		},
		//传入要排序的名称
		formatName: {
			type: String,
			default: "cityName"
		},
		//当前定位城市
		activeCity: {
			type: Object,
			default: () => null
		},
		//热门城市
		hotCity: {
			type: Array,
			default: () => []
		},
		//城市数据
		obtainCitys: {
			type: Array,
			default: () => []
		},
		//是否有搜索
		isSearch: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			toView: "city-letter-Find", //锚链接 初始值
			scrollTop: 0, //scroll-view 滑动的距离
			cityindexs: [], // 城市索引
			activeCityIndex: "", // 当前所在的城市索引
			handleCity: [], // 处理后的城市数据
			serachCity: "", // 搜索的城市
			cityData: [],
			active: {},
			towns: [],
			town: {}
		}
	},
	computed: {
		/**
		 * @desc 城市列表排序
		 * @return  Array
		 */
		sortItems() {
			for (let index = 0; index < this.handleCity.length; index++) {
				if (this.handleCity[index].isCity) {
					let cityArr = this.handleCity[index].citys
					cityArr = cityArr.sort(function (a, b) {
						var value1 = a.unicode
						var value2 = b.unicode
						return value1 - value2
					})
				}
			}
			return this.handleCity
		},
		/**
		 * @desc 搜索后的城市列表
		 * @return Array
		 */
		searchDatas() {
			var searchData = []
			for (let i = 0; i < this.cityData.length; i++) {
				if (this.cityData[i][this.formatName].indexOf(this.serachCity) !== -1) {
					searchData.push({
						oldData: this.cityData[i],
						name: this.cityData[i][this.formatName]
					})
				}
			}
			return searchData
		}
	},
	created() {
		// 初始化城市数据
		this.cityData = this.obtainCitys
		this.initializationCity()
		this.buildCityindexs()
		this.active = this.activeCity
	},
	watch: {
		obtainCitys(newData) {
			this.updateCitys(newData)
		}
	},
	methods: {
		/**
		 * @desc 初始化
		 */
		updateCitys(data) {
			if (data && data.length) {
				this.cityData = data
				this.initializationCity()
				this.buildCityindexs()
			}
		},
		/**
		 * @desc 监听输入框的值
		 */
		keyInput(event) {
			this.serachCity = event.detail.value
		},
		/**
		 * @desc 初始化城市数据
		 * @return undefind
		 */
		initializationCity() {
			this.handleCity = []
			const cityLetterArr = [
				"A",
				"B",
				"C",
				"D",
				"E",
				"F",
				"G",
				"H",
				"I",
				"J",
				"K",
				"L",
				"M",
				"N",
				"O",
				"P",
				"Q",
				"R",
				"S",
				"T",
				"U",
				"V",
				"W",
				"X",
				"Y",
				"Z",
				"#"
			]
			for (let index = 0; index < cityLetterArr.length; index++) {
				this.handleCity.push({
					name: cityLetterArr[index],
					isCity: false, // 用于区分是否含有当前字母开头的城市
					citys: [], // 存放城市首字母含是此字母的数组
					forName:
						"city-letter-" + (cityLetterArr[index] == "#" ? "0" : cityLetterArr[index]) //label的绑定
				})
			}
		},
		/**
		 * @desc 得到城市的首字母
		 * @param str String
		 */
		getLetter(str) {
			return citySelect.getFirstLetter(str[0])
		},
		/**
		 * @desc 构建城市索引
		 * @return undefind
		 */
		buildCityindexs() {
			this.cityindexs = []
			for (let i = 0; i < this.cityData.length; i++) {
				// 获取首字母
				const cityLetter = this.getLetter(this.cityData[i][this.formatName]).firstletter
				// 获取当前城市首字母的unicode，用作后续排序
				const unicode = this.getLetter(this.cityData[i][this.formatName]).unicode

				const index = this.cityIndexPosition(cityLetter)
				if (this.cityindexs.indexOf(cityLetter) === -1) {
					this.handleCity[index].isCity = true
					this.cityindexs.push(cityLetter)
				}

				this.handleCity[index].citys.push({
					cityName: this.cityData[i][this.formatName],
					unicode: unicode,
					oldData: this.cityData[i]
				})
			}
		},
		/**
		 * @desc 滑动到城市索引所在的地方
		 * @param id String 城市索引
		 */
		cityindex(id) {
			this.toView = id
		},
		/**
		 * @desc 获取城市首字母的unicode
		 * @param letter String 城市索引
		 */
		cityIndexPosition(letter) {
			if (!letter) {
				return ""
			}
			const ACode = 65
			return letter === "#" ? 26 : letter.charCodeAt(0) - ACode
		},
		/** @desc 城市列表点击事件
		 *  @param Object
		 */
		cityTrigger(item) {
			this.serachCity = ""
			this.active = item.oldData
			this.$emit("trigger", item.oldData)
		},
		scroll(e) {
			this.scrollTop = e.detail.scrollTop
		}
	}
}
</script>

<style lang="scss">
//宽度转换vw
@function vww($number) {
	@return ($number / 375) * 750 + rpx;
}

view {
	box-sizing: border-box;
	font-size: 28rpx;
}

.city-serach {
	width: 100%;
	color: #4a4a4a;
	padding: vww(10);
	background-color: #fff;
	&-input {
		height: vww(30);
		line-height: vww(40);
		font-size: vww(14);
		padding: 0 vww(5);
		border: 1px solid #4d8cfd;
		border-radius: 3px;
	}
}

.city-select-main {
	position: relative;
	width: 100%;
	height: 100%;
	background: #f6f5fa;
}

.city-select {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: #f6f5fa;
	// 热门城市
	.hot-city {
		padding: 0 vww(10) vww(12);
		overflow: hidden;
		width: 100vw;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.item {
			width: 30%;
			margin: 10rpx 1%;
			background-color: #f6f5fa;
			border-radius: 6rpx;
			padding: 16rpx 12rpx;
			text-align: center;
		}
	}
	.citys {
		padding-bottom: 80rpx;
		background: #fff;
		.citys-row {
			padding-left: vww(14);
			width: 100%;
			font-size: 14px;
			background: #fff;
			.citys-item-letter {
				margin-left: vww(-18);
				padding-left: vww(18);
				margin-top: -1px;
				line-height: vww(30);
				color: #9b9b9b;
				background: #f6f5fa;
				border-top: none;
			}
			.citys-item {
				width: 100%;
				line-height: vww(50);
				color: #4a4a4a;
				border-bottom: 1px solid #ebebf0;

				&:last-child {
					border: none;
				}
			}
		}
	}
	.city-indexs-view {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 999;
		display: flex;
		width: vww(20);
		height: 100%;
		text-align: center;
		.city-indexs {
			width: vww(20);
			text-align: center;
			vertical-align: middle;
			align-self: center;
			.city-indexs-text {
				margin-bottom: vww(10);
				width: vww(20);
				font-size: 12px;
				color: #4d8cfd;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}

.select {
	background-color: #f29100 !important;
	color: #fff;
}
</style>
